<route>
    {
        meta: {
            layout: 'nepu',
            title:'知识产权'
        }
    }
  </route>
<template>
    <view>
        <Uploader @confirm="openUploader"></Uploader>
        <InnerTable :data="tableData" @delete="handleDelete" @update="handleUpdate"></InnerTable>
        <a-divider></a-divider>
        <AntdZh>
            <a-pagination v-model:current="queryParams.pageNum" v-model:pageSize="queryParams.pageSize" :total="total"
                @change="getList" />
        </AntdZh>
        <!--上传 / 修改 Modal-->
        <AntdConfirmModal :title="isCreate ? '新建' : '修改'" ref="modalRef" width="800px" :keepSlot="false"
            @confirm="submitForm">
            <template #header v-if="isCreate">
                <a-row>
                    <a-col :span="2">
                        <a-tooltip title="暂存">
                            <a-button shape="circle" size="large" @click="tapStore">
                                <template #icon>
                                    <VerticalAlignBottomOutlined />
                                </template>
                            </a-button>
                        </a-tooltip>
                    </a-col>
                    <a-col :span="2">
                        <a-tooltip title="历史草稿">
                            <a-button shape="circle" size="large" @click="showDrafts">
                                <template #icon>
                                    <HistoryOutlined />
                                </template>
                            </a-button>
                        </a-tooltip>
                    </a-col>
                </a-row>
            </template>
            <a-form ref="formRef" :model="form" name="basic" :label-col="{ span: 8 }">
                <view v-if="isCreate">
                    <a-row align="middle">
                        <a-form-item label="知识产权等级" name="propertyDictId"
                            :rules="[{ required: true, message: '请选择知识产权等级' }]">
                            <PropertySelect v-model:value="form.propertyDictId"></PropertySelect>
                        </a-form-item>
                    </a-row>
                    <a-row align="middle">
                        <a-form-item label="知识产权名称" name="propertyName" :rules="[{ required: true, message: '请输入知识产权名称' }]">
                            <a-input v-model:value="form.propertyName" style="width: 400px" placeholder="请输入知识产权名称" />
                        </a-form-item>
                    </a-row>
                    <a-row align="middle">
                        <a-form-item label="知识产权编号" name="propertyCode" :rules="[{ required: true, message: '请输入知识产权编号' }]">
                            <a-input v-model:value="form.propertyCode" style="width: 400px"
                                placeholder="格式例如（123123123123.1）" @input="check(form.propertyCode)" />
                            <div style="margin-top: -1px; margin-left: 12px">
                                <span v-show="!tip" style="color: red; font-size: smaller">知识产权编号格式错误</span>
                                <span v-show="tip" style="color: green; font-size: smaller">知识产权编码格式正确</span>
                            </div>
                        </a-form-item>
                    </a-row>
                    <a-row align="middle">
                        <a-form-item label="第一专利权人" name="firstSignatureUnit"
                            :rules="[{ required: true, message: '请输入第一专利权人' }]">
                            <a-input v-model:value="form.firstSignatureUnit" style="width: 400px" placeholder="请输入第一专利权人" />
                        </a-form-item>
                    </a-row>
                    <a-row>
                        <a-col :span="16">
                            <a-form-item label="第一完成人" name="firstAuthorId"
                                :rules="[{ required: true, message: '请选择第一完成人' }]" v-if="firstAuthorRadio === 1">
                                <LoginUserCell v-model:userId="form.firstAuthorId" v-model:nickName="form.firstAuthor"
                                    style="width: 250px">
                                </LoginUserCell>
                            </a-form-item>
                            <a-form-item label="第一完成人" name="firstAuthor" :rules="[{ required: true, message: '请输入第一完成人' }]"
                                v-else>
                                <a-input v-model:value="form.firstAuthor" style="width: 250px" placeholder="请输入第一完成人" />
                                <!-- <AntdUserSelect v-model:value="form.firstAuthorId"></AntdUserSelect> -->
                            </a-form-item>
                        </a-col>
                        <a-col>
                            <a-radio-group v-model:value="firstAuthorRadio" name="firstAuthorRadio">
                                <a-radio :value="0" @change="firstAuthorRadio = 0">学生</a-radio>
                                <a-radio :value="1" @change="firstAuthorRadio = 1">职工</a-radio>
                            </a-radio-group>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="16" v-if="firstAuthorRadio === 0">
                            <a-form-item label="第二完成人" name="secondAuthorId"
                                :rules="[{ required: true, message: '请输入第二完成人' }]">
                                <LoginUserCell v-model:userId="form.secondAuthorId" v-model:nickName="form.secondAuthor"
                                    style="width: 250px">
                                </LoginUserCell>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </view>
            </a-form>
        </AntdConfirmModal>
        <!--草稿列表-->
        <DraftDrawer v-if="draftShow" v-model:show="draftShow" :form.sync="form"></DraftDrawer>
    </view>
</template>
<script setup>
// 图标引入
import { InboxOutlined, VerticalAlignBottomOutlined, HistoryOutlined } from '@ant-design/icons-vue';
// 组件 & 函数引入
import { InnerTable, PropertySelect, LoginUserCell, Uploader, formDefault, createDraft, DraftDrawer, mergeWith } from './index'
// CURD
import { createOne, queryList, deleteOne } from '@/custom/nepu/api/property';
// HOOKS
import useApp from '@/hooks'
const { $, proxy } = useApp()
// 页面参数
const tip = ref();
const modalRef = ref(null)
const formRef = ref(null)
const isCreate = ref(true)
const draftShow = ref(false)
const queryParams = ref({
    pageNum: 1,
    pageSize: 10
})
// 表单
const form = ref(formDefault);
const total = ref(1)
const tableData = ref([])
const firstAuthorRadio = ref(1);
const secondAuthorRadio = ref(1);
const props = defineProps({
    show: {
        type: Boolean,
    },
    viewData: {
        type: Object,
    },
});

//知识产权编码校验
function check(e) {
    const reg = /^.{1,14}$/;
    if (!reg.test(e)) {
        tip.value = false;
    } else {
        tip.value = true;
    }
}
function openUploader() {
    isCreate.value = true;
    modalRef.value.openModal()
}
// 记录删除
function handleDelete(id) {
    console.log(id)
    deleteOne(id).then(r => {
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
        getList()
    })
}
// 修改
function handleUpdate(e) {
    form.value = e
    isCreate.value = false
    modalRef.value.openModal()
}
// 列表查询
function getList() {
    queryList(queryParams.value).then(res => {
        console.log(res)
        tableData.value = res.content;
        total.value = res.totalElements;
    })
}
// 点击暂存
function tapStore() {
    let formId = '知识产权'
    createDraft({
        formId,
        formJsonStr: JSON.stringify(form.value)
    }).then(r => {
        $.showToast({
            title: '暂存成功',
            icon: 'success'
        })
    })
}
// 展示草稿列表
function showDrafts() {
    //modalRef.value.closeModal();
    draftShow.value = true;
}
function submitForm() {
    console.log(form.value)
    formRef.value.validateFields().then(v => {
        console.log('校验成功')
        createOne(form.value).then(res => {
            $.showToast({
                title: '创建成功',
                icon: 'success'
            })
            getList()
            form.value = formDefault;
            modalRef.value.closeModal()
        })
    }).catch(e => {
        console.log('校验失败')
    })
}
getList()
</script>